<template>
  <div class="content">
    <div style="">修理订单工序报送</div>

    <div class="mt_20 mb_20">
      <steps
        :currentStep="currentStep"
        :totalSteps="totalSteps"
        :stepsData="stepsData"
      />
    </div>

    <el-form :model="ruleForm" label-width="140px" class="ruleForm" id="form">
      <el-form-item label="值" style="display: none">
        <el-input v-model="ruleForm.value" ref="input"></el-input>
      </el-form-item>
      <el-form-item label="员工码">
        <el-input v-model="ruleForm.staff" readonly></el-input>
      </el-form-item>

      <el-form-item label="产品码">
        <el-input v-model="ruleForm.code" ref="input" readonly></el-input>
      </el-form-item>

      <!-- <el-form-item label="客户代码">
        <el-input v-model="ruleForm.custNo" ref="input" readonly></el-input>
      </el-form-item> -->
      <el-form-item label="产品规格">
        <el-input v-model="ruleForm.specs" ref="input" readonly></el-input>
      </el-form-item>
      <el-form-item label="工序码">
        <el-input v-model="ruleForm.production" ref="input" readonly></el-input>
      </el-form-item>

      <el-form-item label="OK数量">
        <el-input
          v-model="ruleForm.num"
          :placeholder="numStr"
          id="bsnum"
        ></el-input>
      </el-form-item>

      <el-form-item label="NG数量">
        <el-input
          v-model="ruleForm.ngNum"
          :placeholder="numStr"
          id="ngnum"
        ></el-input>
      </el-form-item>

      <el-form-item align="left">
        <el-button type="primary" @click="submitForm" style="width: 260px"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
    <div class="table">
      <template>
        <el-table
          :data="multipleTable"
          style="width: 100%"
          height="550"
          border="true"
        >
          <el-table-column prop="orderNo" label="订单号" width="120" sortable>
          </el-table-column>
          <el-table-column prop="specs" label="规格" width="100" sortable>
          </el-table-column>

          <el-table-column
            prop="production"
            label="流转工艺"
            width="100"
            sortable
          >
          </el-table-column>
          <el-table-column prop="success" label="成功数量" width="100" sortable>
          </el-table-column>
          <el-table-column prop="error" label="失败数量" width="100" sortable>
          </el-table-column>
          <el-table-column prop="staff" label="员工" width="80" sortable>
          </el-table-column>
          <el-table-column prop="errorMessage" label="备注" width="230">
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import api from "../../../api";
import steps from "../order/steps.vue";
import { productionList } from "../../common/enum";
const debounce = (() => {
  let timer = null;
  return (callback, wait) => {
    clearTimeout(timer);
    timer = setTimeout(callback, wait);
  };
})();
export default {
  components: {
    steps,
  },
  data() {
    return {
      ruleForm: {
        stepsData: [],
        currentStep: 0,
        totalSteps: 0,
        stepsDesc: [],
        stepsDataSpec: [],
        currentStepSpec: 0,
        totalStepsSpec: 0,
        orderProduction: [],
        code: "",
        production: "",
        staffNumber: sessionStorage.getItem("staffNumber"),
        orderNo: "",
        specs: "",
        staff: sessionStorage.getItem("staff"),
        value: "",
        custNo: "",
        specs: "",
        num: "",
        ngNum: "",
      },
      bsnum: 0,
      orderNo: "",
      numStr: "",
      statusList: [],
      multipleTable: [],
      firstChar: "",
    };
  },
  watch: {
    "ruleForm.value": {
      handler: function (newVal, oldVal) {
        debounce(() => {
          if (newVal == "") {
            return true;
          }
          console.info("value", this.ruleForm.value);
          if (this.ruleForm.value.indexOf("/") > -1) {
            if (this.ruleForm.staff == "") {
              this.$message.error("请先扫员工码");
              this.ruleForm.value = "";
              return true;
            }
            //如果产品码没扫 则先提示扫产品码
            if (this.ruleForm.orderNo == "") {
              this.$message.error("请先扫产品码");
              this.ruleForm.value = "";
              return true;
            }

            let label = this.ruleForm.value.split("/")[0];
            let tag = this.ruleForm.value.split("/")[1];
            tag = tag === "0" ? "-开始" : "-结束";
            let value = this.getProductionValue(label);
            console.info(value);
            if (value != "") {
              this.ruleForm.production = value + tag;
              // 去查询能报送的最大数量
              api
                .toBeTransferredNum({
                  orderNo: this.ruleForm.orderNo,
                  specs: this.ruleForm.specs,
                  production: this.ruleForm.production,
                })
                .then((res) => {
                  this.bsnum = res.data;
                  this.numStr =
                    "OK报送数量和NG报送数量合计不能超过" + this.bsnum;
                });
            } else {
              this.ruleForm.production = "未知";
            }
          } else if (
            this.ruleForm.value.indexOf("-") > -1 &&
            this.ruleForm.value != ""
          ) {
            if (this.ruleForm.staff == "") {
              this.$message.error("请先扫员工码");
              this.ruleForm.value = "";
              return true;
            }
            this.ruleForm.code = this.ruleForm.value;
            let orderNo = this.ruleForm.code.split("-")[0];
            let specs = this.ruleForm.code.split("-")[1];
            this.ruleForm.orderNo = orderNo;
            this.ruleForm.specs = specs;
            api
              .productionsWithTag({ orderNo: orderNo, specs: specs })
              .then((res) => {
                this.ruleForm.orderNo = orderNo;
                this.ruleForm.specs = specs;
                this.statusList = res.data;
              });

            // api
            //   .orderNoAndSpecs({ orderNo: orderNo, specs: specs })
            //   .then((res) => {
            //     this.ruleForm.custNo = res.data.custNo;
            //     this.ruleForm.specs = res.data.specs;
            //   });
          } else {
            // 当员工码处理
            if (this.ruleForm.value != "") {
              this.ruleForm.staffNumber = this.ruleForm.value;
              api
                .staffFlow({ number: this.ruleForm.staffNumber })
                .then((res) => {
                  this.ruleForm.staff = res.data.name;

                  sessionStorage.setItem("staff", this.ruleForm.staff);
                  sessionStorage.setItem(
                    "staffNumber",
                    this.ruleForm.staffNumber
                  );
                });
            }
          }
          this.ruleForm.value = "";
        }, 500);
      },
    },
  },
  mounted() {
    document.addEventListener("keydown", (e) => {
      console.info(e);
      if (e.srcElement.id == "bsnum") {
        return true;
      }
      if (!isNaN(e.key) || e.key == "-" || e.key == "." || e.key == "/") {
        this.ruleForm.value = this.ruleForm.value + e.key;
        console.info("ruleValue", this.ruleForm.value);
      }
    });
  },
  methods: {
    getProductionValue(label) {
      for (var i = 0; i < productionList.length; i++) {
        var item = productionList[i];
        console.info("item", item);
        if (label == item.label) {
          return item.value;
        }
      }
      return "";
    },

    submitForm() {
      if (
        this.ruleForm.num == "" ||
        this.ruleForm.num == 0 ||
        this.ruleForm.num < 0
      ) {
        this.$message.error("报送数量需要大于0");
        return;
      }

      let n1 = this.ruleForm.num == "" ? 0 : this.ruleForm.num;
      let n2 = this.ruleForm.ngNum == "" ? 0 : this.ruleForm.ngNum;
      let n3 = Number(n1) + Number(n2);
      console.info("n1+n2=" + n3);
      if (n3 > 100) {
        this.$message.error("单次OK报送数量和NG报送数量合计不能超过100");
        return;
      }
      if (n3 > this.bsnum) {
        this.$message.error("OK报送数量和NG报送数量合计不能超过" + this.bsnum);
        return;
      }

      if (
        !this.ruleForm.code ||
        !this.ruleForm.production ||
        !this.ruleForm.staffNumber ||
        !this.ruleForm.orderNo ||
        !this.ruleForm.specs
      ) {
        this.$message.error("不能为空");
      } else {
        api.submitUpdate(this.ruleForm).then((res) => {
          this.orderNo = this.ruleForm.orderNo;
          this.getData();
          var item = {
            success: 0,
            error: 0,
            errorMessage: "",
            orderNo: this.ruleForm.orderNo,
            specs: this.ruleForm.specs,
            production: this.ruleForm.production,
            staff: this.ruleForm.staff,
          };
          item.success = res.data.success;
          item.error = res.data.error;
          item.errorMessage = res.data.errorMessage;
          item.orderNo = this.ruleForm.orderNo;
          item.totalNum = this.bsnum;
          item.specs = this.ruleForm.specs;
          item.staff = this.ruleForm.staff;
          item.production = this.ruleForm.production;
          this.multipleTable.push(item);
          sessionStorage.setItem("multipleTable", this.multipleTable);

          this.ruleForm.code = "";
          this.ruleForm.production = "";
          this.ruleForm.specs = "";
          this.ruleForm.orderNo = "";
          this.number = "";
          this.orderNo = this.bsnum = 0;
          this.numStr = "";

          //location.reload();
        });
      }
    },
    getData() {
      api
        .orderProductionRecord({ orderNo: this.orderNo })
        .then((res) => {
          if (res.code === 200) {
            this.stepsData = [];
            for (let i = 0; i < res.data.length; i++) {
              const element = res.data[i];
              const time =
                element.startTime && element.endTime
                  ? element.startTime + "~" + element.endTime
                  : element.startTime && !element.endTime
                  ? element.startTime
                  : "";
              console.info(1);
              console.info(time);
              // this.stepsDesc.push(time);
              if (element.status == "1") this.currentStep = i + 1;
              this.stepsData.push({
                label: element.production,
                orderNo: element.orderNo,
                desc: time,
                total: element.total,
                ngNum: element.ngNum,
                ngNumStr: element.ngNumStr,
                hasDone: element.hasDone,
                toBeCompleted: element.toBeCompleted,
                status: element.status,
              });
              // if (element.status == "2") this.currentStep = i + 1;
            }
            this.orderProduction = res.data;
            this.totalSteps = res.data.length;
            console.info("currentStep=", this.currentStep);
            console.info("totalSteps=", this.totalSteps);
            console.info("stepsData=", this.stepsData);
            // this.clickStep = this.currentStep - 1;
            // if (this.clickStep < 0) this.clickStep = 0;
          }
        })
        .catch();
    },
  },
};
</script>

<style scoped>
.content {
  text-align: center;
  font-size: 40px;
  margin-top: 40px;
}

#form >>> .el-form-item__label {
  font-size: 20px !important;
  margin-top: 3px;
}

#form >>> .el-input--small .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
}

#form >>> .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 18px;
  margin-top: 21px;
  margin-left: -10px;
}

.ruleForm {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  margin-left: 16%;
  width: 400px;
}

.table {
  position: absolute;
  top: 120px;
  margin-left: 43%;
  /* width: 520px; */
}

.production {
  position: absolute;
  font-size: 16px !important;
  color: gray;
}
</style>